<script setup>
import { RouterLink, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user';

const { userInfo, clearUserInfo } = useUserStore()
const router = useRouter();

const goCreateEditBlog = () => {
  router.push('/create')
}

const goMyBlogs = () => {
  router.push('/myBlog')
}

const logout = () => {
  clearUserInfo()
  localStorage.removeItem('token')
  router.push('/login')
}
</script>

<template>
  <div>
    <!-- 如果userInfo.userinfo 存在则显示userInfo.userinfo，否则显示登录链接-->
    <div class="dropdown" v-if="userInfo.username">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{userInfo.nickname || userInfo.username}}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goCreateEditBlog"><el-icon><Edit /></el-icon>创建博客</el-dropdown-item>
            <el-dropdown-item @click="goMyBlogs"><el-icon><Files /></el-icon>我的博客</el-dropdown-item>
            <el-dropdown-item @click="logout"><el-icon><SwitchButton /></el-icon>注销</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <RouterLink v-else to="/login">登录</RouterLink>
  </div>
</template> 